<#--
 * Created by Stony on 2016/7/6.
       \   ^__^
         \  (**)\__
            (__)\       )\/\
             U  ||------|
                ||     ||
-->
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>系统负载图表</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="<@global.media_css/>bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>style-metro.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>style.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="<@global.media_css/>uniform.default.css" rel="stylesheet" type="text/css"/>
    <style>
        .page-content {
            margin-left: 3px;
            margin-right: 3px;
            margin-top: 0;
            min-height: 950px;
            background-color: #1D2224;
        }
        .dashboard-stat .visual2{
            padding-top: 50px;
            /* text-align: right; */
            font-size: 100px;
            letter-spacing: -1px;
            color: #fff;
            margin-bottom: 25px;
            width: 400px;
            height: 90px;
            display: block;
            float: left;
            padding-left: 15px;
            font-family: 微软雅黑;
            font-weight: bold;
        }
        .dashboard-stat .details .number {
            padding-top: 50px;
            text-align: right;
            font-size: 100px;
            letter-spacing: -1px;
            color: #fff;
            margin-bottom: 10px;
            font-family: 微软雅黑;
            font-weight: bold;
        }
        .dashboard-stat .more {
            clear: both;
            display: block;
            padding: 8px 10px 8px 10px;
            text-transform: uppercase;
            font-weight: 300;
            font-size: 28px;
            color: #fff;
            opacity: .7;
            filter: alpha(opacity=70);
            font-family: 微软雅黑;
        }
        .dashboard-stat .details .desc {
            text-align: right;
            font-size: 20px;
            letter-spacing: 0;
            font-weight: 300;
            color: #fff;
            padding-top: 30px;
        }
        .texxx{
            color: #a8a3a3;
            clear: #6ef146;
        }
        .dashboard-stat.black2 {
            background-color: #1D2224;
        }
        body{
            background-color: #1D2224;
        }
        .bbk{
            background-color: #1D2224;
        }
    </style>
    <!-- END GLOBAL MANDATORY STYLES -->
    <link rel="shortcut icon" href="<@global.media_image/>favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page black" style="background-color: #000000">
<!-- BEGIN HEADER -->

<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid black">
    <!-- BEGIN SIDEBAR -->
    <div class="page-sidebar nav-collapse collapse hide"></div>
    <!-- END SIDEBAR -->
    <!-- BEGIN PAGE -->
    <div class="page-content">
        <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
        <div id="portlet-config" class="modal hide">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button"></button>
                <h3>portlet Settings</h3>
            </div>
            <div class="modal-body">
                <p>Here will be a configuration form</p>
            </div>
        </div>
        <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
        <!-- BEGIN PAGE CONTAINER-->
        <div class="container-fluid">
            <!-- BEGIN PAGE HEADER-->
            <div class="row-fluid">
                <div class="span12">
                    <!-- BEGIN STYLE CUSTOMIZER -->

                    <!-- END BEGIN STYLE CUSTOMIZER -->
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title"><small></small>
                    </h3>
                    <ul class="breadcrumb hide">
                        <li>
                            <i class="icon-home"></i>
                            <a href="index.html">Home</a>
                            <i class="icon-angle-right"></i>
                        </li>
                        <li><a href="#">Visual Charts</a></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- BEGIN DASHBOARD STATS -->
            <div class="row-fluid">
                <div class="span6 responsive" data-tablet="span6" data-desktop="span3">
                    <div class="dashboard-stat black2">
                        <div class="visual2">
                            系统请求
                        </div>
                        <div class="details">
                            <div class="number" id="requestNumber">
                                1349
                            </div>
                            <div class="desc">
                                请求数量
                            </div>
                        </div>
                        <a class="more" href="#">
                            首约汽车 2016年7月6日 11:08:20
                        </a>
                    </div>
                </div>
                <div class="span6 responsive" data-tablet="span6" data-desktop="span3">
                    <div class="dashboard-stat black2">
                        <div class="visual2">
                            系统负载
                        </div>
                        <div class="details">
                            <div class="number" id="loadNumber">
                                549
                            </div>
                            <div class="desc">
                                负载
                            </div>
                        </div>
                        <a class="more" href="#">
                            首约汽车 2016年7月6日 11:08:20
                        </a>
                    </div>
                </div>
            </div>
            <!-- END DASHBOARD STATS -->
            <!-- END PAGE HEADER-->
            <!-- BEGIN CHART PORTLETS-->
            <div class="row-fluid">
                <div class="span6">
                        <!-- BEGIN DYNAMIC CHART PORTLET-->
                        <div class="portlet box black">
                            <div class="portlet-title hide">
                                <div class="caption"><i class="icon-reorder"></i>系统请求</div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"></a>
                                    <a href="#portlet-config" data-toggle="modal" class="config"></a>
                                    <a href="javascript:;" class="reload"></a>
                                    <a href="javascript:;" class="remove"></a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div id="chart_request" class="chart" style="height: 500px;"></div>
                            </div>
                        </div>
                        <!-- END DYNAMIC CHART PORTLET-->
                    </div>
                    <div class="span6">
                        <!-- BEGIN DYNAMIC CHART PORTLET-->
                        <div class="portlet box black">
                            <div class="portlet-title hide">
                                <div class="caption"><i class="icon-reorder"></i>系统负载</div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"></a>
                                    <a href="#portlet-config" data-toggle="modal" class="config"></a>
                                    <a href="javascript:;" class="reload"></a>
                                    <a href="javascript:;" class="remove"></a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div id="chart_4" class="chart"  style="height: 500px;"></div>
                            </div>
                        </div>
                        <!-- END DYNAMIC CHART PORTLET-->
                    </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div class="portlet-title hide">
                        <div class="caption"><i class="icon-reorder"></i>日志信息</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a>
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                            <a href="javascript:;" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet box bbk">
                        <div class="portlet-body" style="height: 1100px;background-color: #1D2224;">
                            <iframe src="<@global.log_url />" style="height:100%; width:100%; overflow:hidden;" class="bbk"></iframe>
                            <!--
                            -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CHART PORTLETS-->
            <!-- END PAGE CONTENT-->
        </div>
        <!-- BEGIN PAGE CONTAINER-->
    </div>
    <!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->

<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="<@global.media_js/>jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="<@global.media_js/>jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>bootstrap.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="<@global.media_js/>excanvas.min.js"></script>
<script src="<@global.media_js/>respond.min.js"></script>
<![endif]-->
<script src="<@global.media_js/>jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery.blockui.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery.cookie.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery.uniform.min.js" type="text/javascript" ></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="<@global.media_js/>jquery.flot.js"></script>
<script src="<@global.media_js/>jquery.flot.resize.js"></script>
<script src="<@global.media_js/>jquery.flot.pie.js"></script>
<script src="<@global.media_js/>jquery.flot.stack.js"></script>
<script src="<@global.media_js/>jquery.flot.crosshair.js"></script>
<script src="<@global.media_js/>moment.min.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/static/js/app.js"></script>
<script >

    var loadData = [];
    var requestData = [];
    var totalPoints = 250;

    // random data generator for plot charts
    function getRangeData(begin,end){
        return Math.floor(Math.random()*(end-begin))+begin;
    }
    function getLoadData() {
        if (loadData.length > 0) loadData = loadData.slice(1);
        // do a random walk
        while (loadData.length < totalPoints) {
//            var prev = data.length > 0 ? data[data.length - 1] : 50;
//            var y = prev + Math.random() * 10 - 5;
//            if (y < 0) y = 0;
//            if (y > 100) y = 100;
            loadData.push(getRangeData(10,55));
        }
        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < loadData.length; ++i) res.push([i, loadData[i]])
        return res;
    }
    function getRequestData(){
        if (requestData.length > 0) requestData = requestData.slice(1);
        // do a random walk
        while (requestData.length < totalPoints) {
//            var prev = data.length > 0 ? data[data.length - 1] : 50;
//            var y = prev + Math.random() * 10 - 5;
//            if (y < 0) y = 0;
//            if (y > 100) y = 100;
            requestData.push(getRangeData(300,1000));
        }
        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < requestData.length; ++i) res.push([i, requestData[i]])
        return res;
    }
    //Dynamic Chart
    var updateInterval = 1000;
    function chart4(divName,colors) {
        //server load
        var options = {
            series: {
                shadowSize: 1
            },
            lines: {
                show: true,
                lineWidth: 0.5,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.1
                    }, {
                        opacity: 1
                    }
                    ]
                }
            },
            yaxis: {
                min: 0,
                max: 100,
                tickFormatter: function (v) {
                    return v;
                }
            },
            xaxis: {
                show: false
            },
            colors: [colors],
            grid: {
                tickColor: "#a8a3a3",
                borderWidth: 0
            }
        };

        var jdivName = "#"+divName;
        var plot = $.plot($(jdivName), [getLoadData()], options);
        function update() {
            plot.setData([getLoadData()]);
            plot.draw();
            $("#loadNumber").html("" + loadData[loadData.length - 1]);
            setTimeout(update, updateInterval);
        }
        update();
    }
    function chartRequest(divName,colors) {
        //server load
        var options = {
            series: {
                shadowSize: 1
            },
            lines: {
                show: true,
                lineWidth: 0.5,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.1
                    }, {
                        opacity: 1
                    }
                    ]
                }
            },
            yaxis: {
                min: 0,
                max: 1500,
                tickFormatter: function (v) {
                    return v;
                }
            },
            xaxis: {
                show: false
            },
            colors: [colors],
            grid: {
                tickColor: "#a8a3a3",
                borderWidth: 0
            }
        };
        var jdivName = "#"+divName;
        var plot = $.plot($(jdivName), [getRequestData()], options);

        function update() {
            plot.setData([getRequestData()]);
            plot.draw();
            $("#requestNumber").html("" + requestData[requestData.length - 1]);
            setTimeout(update, updateInterval);
        }
        update();

    }
    function updateMore(){
        var dateStr = moment().format("YYYY年MM月DD日 HH:mm:ss");
        $(".more").html("首汽约车 " + dateStr);
        setTimeout(updateMore, 1000);
    }
</script>
<script>
    jQuery(document).ready(function() {
        // initiate layout and plugins
//        App.init();
        chartRequest("chart_request","#12090F");
        chart4("chart_4","#F13718");
        updateMore();
    });
</script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>